<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热门应用统计</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById('main'));

    // 发送请求获取前十个个热门应用数据
    fetch('/answer_count')  // 确保请求的 URL 正确
        .then(response => response.json())
        .then(data => {
            // 处理数据
            var appIds = [];
            var answerCounts = [];
            data.data.forEach(item => {
                appIds.push(item.appId);
                answerCounts.push(item.answerCount);
            });

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '前十个个热门应用统计'
                },
                tooltip: {},
                xAxis: {
                    data: appIds
                },
                yAxis: {},
                series: [{
                    name: '答题数量',
                    type: 'bar',
                    data: answerCounts
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
</script>
</body>
</html>